<template>
	<!-- vip充值窗口 2022/8/14新增 -->
	<div class="vip-cvs" v-show="modelValue">
	  <div class="vip-cz-win">
	    <p class="title">爱下载资源分享平台-开通SVIP<a class="close" @click="$emit('update:model-value', false)"></a></p>
	    <div class="data">

			<div class="v" v-for="conf in vipConfigs">
			  <h1>{{conf.name}}</h1>
			  <p class="money">{{conf.price}}</p>
			  <p class="ls" v-if="conf.exp > 0">有效期{{conf.exp}}天</p>
        <p class="ls" v-else>永久有效</p>
			  <p class="ls">免费资源下载</p>
			  <p class="ls">赠送<b>{{ conf.score }}</b>积分</p>
			  <a class="btn" @click="handleVip(conf.id)">立即开通</a>
			</div>
		</div>
	  </div>
	</div>
</template>

<script>

export default {
	props:{
		modelValue: {
			required: false , 
			type: Boolean , 
			default: false
		}
	},
	emits: ["update:model-value"], 
	data() {
		return {
			vipConfigs: [] ,
		}
	},
	created() {
		this.$api.svipList("/svip/list").then(ret=> {
			if (ret.status) {
				this.vipConfigs = ret.list ;
			}
		})
	},
	methods: {
		handleVip(confId) {
      window.open(this.$router.resolve({path: "/alipay", query: {confId}}).fullPath)
		}
	}
}
	
</script>


<style>
</style>